<!DOCTYPE html>
<html lang="en">

<head>
    <script src="jquery.js"></script>
    <meta charset="UTF-8">
    <title>新题提交</title>
    <style>
        html {
            width: 100%;
            height: 100%;
            overflow: hidden;
            font-style: sans-serif;
        }

        body {
            width: 100%;
            height: 100%;
            font-family: 'Open Sans', sans-serif;
            margin: 0;
            background-color: #4A374A;
        }

        #login {
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -150px 0 0 -150px;
            width: 300px;
            height: 300px;
        }

        #login h1 {
            color: #fff;
            text-shadow: 0 0 10px;
            letter-spacing: 1px;
            text-align: center;
        }

        h1 {
            font-size: 2em;
            margin: 0.67em 0;
        }

        input {
            width: 400px;
            height: 18px;
            margin-bottom: 10px;
            outline: none;
            padding: 10px;
            font-size: 13px;
            color: #fff;
            text-shadow: 1px 1px 1px;
            border-top: 1px solid #312E3D;
            border-left: 1px solid #312E3D;
            border-right: 1px solid #312E3D;
            border-bottom: 1px solid #56536A;
            border-radius: 4px;
            background-color: #2D2D3F;
        }

        .but {
            width: 400px;
            min-height: 20px;
            display: block;
            background-color: #4a77d4;
            border: 1px solid #3762bc;
            color: #fff;
            padding: 9px 14px;
            font-size: 15px;
            line-height: normal;
            border-radius: 5px;
            margin: 0;
        }
    </style>
</head>

<body>
<h2>页面使用了ajax，添加题目成功后，无需刷新页面就可重新提交新题</h2>
<div id="login">
    <h1>新增题目页面</h1>
        <input type="text" required="required" placeholder="题目"  id="q"></input>
        <input type="text" required="required" placeholder="题目答案"  id="a"></input>
        <button class="but" >提交</button>

</div>

<script>
        document.querySelector(".but").onclick = function () {
        var q = document.querySelector("#q").value;
        var a = document.querySelector("#a").value;
            $.ajax({
                type: "post",
                contentType:'application/x-www-form-urlencoded;charset=UTF-8',
                url: "/uploadQuestion",
                data: {
                    question: q,
                    answer: a
                },
               success: function(res) {
                   if(res==1)  alert("题目已经成功添加到题库")
                   else alert("题库中已有该题,无需重复提交")
                   document.querySelector("#q").value = ""
                   document.querySelector("#a").value = ""
               }
            })
        }
    </script>
</body>

</html>